<template>
  <j-modal
    switchFullscreen
    :title='title'
    :width='500'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <!--    <div class='info-line'>基础设置</div>-->
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button type='primary' @click='handleOk' v-if='!disableSubmit'>确认</a-button>
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='车型编号'
              >
              <a-input :disabled='disableSubmit' placeholder='请输入车型编号' v-decorator="['modelCode',validatorRules.modelCode ]" />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="车型名称"
            >
              <a-input :disabled='disableSubmit' placeholder='请输入车型名称' v-decorator="['modelName']" />
               </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='最小体积'
              >
              <a-input-number  :min='0' :disabled='disableSubmit' placeholder='请输入最小体积' v-decorator="['minVolume', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='最大体积'
              >
              <a-input-number :min='0' :disabled='disableSubmit' placeholder='请输入最大体积' v-decorator="['maxVolume', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='最小件数'
              >
              <a-input-number :min='0' :disabled='disableSubmit' placeholder='请输入最小件数' v-decorator="['minNumber', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='最大件数'
              >
              <a-input-number :min='0' :disabled='disableSubmit' placeholder='请输入最大件数' v-decorator="['maxNumber', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='车型属性'
              >
              <a-radio-group :disabled='disableSubmit' placeholder='请输入车型属性' buttonStyle="solid" v-decorator="['modelProperty',{initialValue:'1'}]">
                <a-radio value="0">常温</a-radio>
                <a-radio value="1">速冻</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='车长度'
              >
              <a-input-number :min='0' :disabled='disableSubmit' placeholder='请输入车长度' v-decorator="['carLength']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'carModelListModel',
  data() {
    return {
      manobjList: [0],
      areaData: '',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        modelCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
      },
      addOrUpdateUrl: window._CONFIG['domianURL'] + '/modeldetailed/cnModelDetailed/saveOrUpdate'
    }
  },
  components: {},
  created() {

  },
  methods: {

    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(()=>{
        this.form.setFieldsValue(pick(this.model,Object.keys(this.model)))
      })
    },
    close(){
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
    },
    handleOk(){
      let vm = this
      this.form.validateFields((err,value) =>{
        if(!err){
          let obj = Object.assign({},this.model,value)
          postAction(this.addOrUpdateUrl,obj).then(res=>{
            if(!res.success){
              vm.$message.error(res.message)
              return
            }
            vm.$message.success(res.message)
            vm.$emit('ok')
          })
        }
      })
    },
  }
}
</script>

<style lang='less' scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}
.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
/deep/ .ant-input-number{
  width:100%;
}
</style>